<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column exhaust-history")
            div(class="flex-column-item flex-center-center h3 under-line") --螺旋杆复位回顾--
            div(class="flex-column-item h3" v-for="(item,index) in currentPageMenus")
                div(class="flex-row")
                    div(class="flex-row-item") {{index+1+skipCount}}
                    div(class="flex-row-item left") {{item | moment().format('MMDD')}}
                    div(class="flex-row-item right") {{item | moment().format('HH:mm')}}
            div(class="flex-column-item",:class="'flex-'+ (3-currentPageMenus.length)")

</template>

<script>
    export default {
        data() {
            return {
                items: [],
                page: {pageIndex: 1, pageSize: 3}
            };
        },
        computed: {
            skipCount() {
                return (this.page.pageIndex - 1) * this.page.pageSize;
            },
            currentPageMenus() {
                const start = this.skipCount;
                const end = start + this.page.pageSize;
                return this.items.slice(start, end);
            },
            totalPage() {
                const zs = Math.round(this.items.length / this.page.pageSize);
                return this.items.length % this.page.pageSize == 0 ? zs : zs + 1;
            }
        },

        methods: {
            up() {
                this.page.pageIndex =
                    this.page.pageIndex == 1 ? this.totalPage - 1 : this.page.pageIndex - 1;
            },
            down() {
                this.page.pageIndex =
                    this.page.pageIndex == this.totalPage - 1 ? 1 : this.page.pageIndex + 1;
            },

            back() {
                this.$router.push("index?index=3");
            },
            yes() {
            }
        },
        created() {
            this.items = [].concat(window.excharge.resetRecords).reverse();
            console.log(this.items);
        }
    };
</script>

<style lang="less">

</style>
